<template>
  <view class="content">
    <view class="text-area">
      <!-- <text class="zoom-text">Snapora - Free Snap Booth in Your Pocket</text> -->
      <text class="zoom-text">Snapora</text>
    </view>
    <view class="text-a">
      您的私人家庭拍贴馆！
    </view>
    <view class="text-b">
      用妙趣滤镜+创意相框，打造自带故事感的拍立得胶片，即刻生成你的专属回忆收藏卡</view>
  </view>
  <view class="template-container">
    <view v-for="(item, index) in templates" :key="index" class="template-item"
      :class="{ active: selectedTemplate === item.type }" @click="selectTemplate(item.type)">
      <view class="image-wrapper">
        <image class="template-img" :src="item.preview" mode="aspectFill" />
      </view>
      <text class="template-name">{{ item.name }}</text>
    </view>
  </view>
  <view class="btn-box">
    <button class="confirm-btn" @click="navigateToGrid">开始拍照</button>
    <button class="next-btn" @click="uploadImage">选择照片</button>

  </view>
</template>

<script setup>
import { ref, reactive } from "vue";

let title = ref('Hello')
const intoBtn = () => {
  console.log('123213')
}

const selectedTemplate = ref('')
const templates = ref([
  // {
  //   type: 'two',
  //   name: '二宫格',
  //   preview: '../../static/xiaoxiong.jpg'
  // },
  {
    type: 'four',
    name: '四宫格',
    preview: '../../static/45.png'
  }
  // {
  //   type: 'six',
  //   name: '六宫格',
  //   preview: '../../static/xiaoxiong.jpg'
  // }
])

const selectTemplate = (type) => {
  selectedTemplate.value = type
}

const navigateToGrid = () => {
  if (!selectedTemplate.value) {
    uni.showToast({ title: '请先选择模板', icon: 'none' })
    return
  }


  uni.navigateTo({
    url: `/pages/take/index?type=${encodeURIComponent(selectedTemplate.value)}`
  })
}

const uploadImage = () => {
  if (!selectedTemplate.value) {
    uni.showToast({ title: '请先选择模板', icon: 'none' })
    return
  }
  uni.navigateTo({
    url: `/pages/upload/index?type=${encodeURIComponent(selectedTemplate.value)}`
  })
}
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.text-area {
  display: flex;
  justify-content: center;
}

.zoom-text {
  margin-top: 50rpx;
  font-weight: bolder;
  font-size: 120rpx;
  color: #333;
  animation: zoom 2s ease-in-out infinite;
}

@keyframes zoom {

  0%,
  100% {
    transform: scale(0.7);
  }

  50% {
    transform: scale(0.8);
  }
}

.text-a {
  margin-top: 10rpx;
  font-size: 52rpx;
  margin-left: 100rpx;
  margin-right: 100rpx;
}

.text-b {
  margin-top: 20rpx;
  font-size: 28rpx;
  margin-left: 100rpx;
  margin-right: 100rpx;
}

.template-container {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 50rpx;
}

.template-item {
  height: 400rpx;
  width: 30%;
  border-radius: 16rpx;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.template-item.active {
  transform: scale(1.05);
  box-shadow: 0 8rpx 24rpx rgba(29, 10, 1, 0.1);
  position: relative;
}

.image-wrapper {
  width: 100%;
  height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  background: white;
}

.template-img {
  object-fit: cover;
  object-position: center center;
  margin-top: 20rpx;
  height: 300rpx;
  width: 100rpx;
  display: block;
  background: white;
}

.template-name {
  height: 100rpx;
  display: block;
  padding: 20rpx;
  text-align: center;
  font-size: 36rpx;
  color: black;
  background: white;
  font-weight: bold;
}

.btn-box {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}

.confirm-btn {
  width: 300rpx;
  height: 80rpx;
  line-height: 60rpx;
  position: relative;
  margin-top: 30rpx;
  margin-bottom: 50rpx;
  left: auto;
  transform: none;
  background: transparent !important;
  border: 6rpx solid black;
  border-radius: 50rpx;
  color: black;
  font-size: 28rpx;
  box-shadow: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;

}

.confirm-btn:active {
  transform: scale(0.95);
}

.next-btn {
  width: 300rpx;
  height: 80rpx;
  line-height: 60rpx;
  position: relative;
  margin-top: 30rpx;
  margin-bottom: 50rpx;
  left: auto;
  transform: none;
  background: transparent !important;
  border: 6rpx solid black;
  border-radius: 50rpx;
  color: black;
  font-size: 28rpx;
  box-shadow: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;

}

.next-btn:active {
  transform: scale(0.95);
}
</style>
